<template>
	<!-- 优惠券底层 -->
	<view class="exchangeGift">
		<view class="circle top">

		</view>
		<view class="circle lef">

		</view>
		<view class="circle right">

		</view>
		<view class="coupon_item">
			<view class="title toptitle">
				输入兑换码
			</view>
			<input type="text" class="inp" placeholder="请输入兑换码" placeholder-style="color:#D0D0D0;fontSize:28rpx">
			<view class="btn">立即兑换</view>
			<u-line class="underline" margin='92rpx auto 0 auto' length="574rpx"></u-line>
			<view class="instructions">
				<view class="introduction title">
					使用说明
				</view>
				<view class="words">
					<view class="word" v-for="(item,index) in words" :key="index">
						{{item}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				words: ['1、每日最多可提现5次', '2、单次提现最低金额为10元', '3、小额提现立即到账！ 高于1000元预计1个工作日 ', '4、单次提现金额上限为5000元 ',
					'5、每个用户每日提现限额2万元 ,',
					'6、 提现时将扣除6 % 的税 + 2 % 的导师服务费 '
				]
			}
		},
		methods: {

		},
		components: {

		},

	}
</script>

<style lang="scss" scoped>
	page {
		background: #ff3932;
	}

	.exchangeGift {
		/* #ifndef H5 */
		height: 100vh;
		background: #ff3932;
		/* #endif */
		width: 100vw;
		position: relative;


		.circle {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background-color: #ff7208;
			box-shadow: 0 0 20rpx 20rpx #ff7208;
		}

		.top {
			position: absolute;
			top: -90rpx;
			right: 40rpx;
		}

		.lef {
			position: absolute;
			top: 30rpx;
			left: -40rpx;
		}

		.right {
			position: absolute;
			top: 200rpx;
			right: -40rpx;
		}

		// 优惠券的具体项
		.coupon_item {
			position: absolute;
			top: 100rpx;
			right: 40rpx;
			display: flex;
			flex-direction: column;
			width: 670rpx;
			height: 950rpx;
			border-radius: 16rpx;
			margin: 0 auto;

			background: #fff;


			.title {
				height: 28rpx;
				margin: 0 auto;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 28rpx;
			}

			input {
				padding-left: 30rpx;
				margin: 0 auto;
				background-color: #f8f8f8;
				width: 528rpx;
				height: 88rpx;
				border-radius: 16rpx;
				margin-top: 48rpx;
			}

			.btn {
				background: #FF7803;
				width: 528rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 32rpx;
			}

			.underline {
				margin-top: 92rpx;
			}

			.toptitle {
				margin-top: 60rpx;
			}

			.introduction {
				text-align: center;
				margin-top: 64rpx;
			}

			.words {
				margin: 0 auto;
				margin-top: 32rpx;
				width: 590rpx;
				height: 266rpx;
				color: #999999;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 48rpx;
			}

		}
	}

	// 每个优惠券上下的半圆
	.coupon_item::before,
	.coupon_item::after {
		position: absolute;
		top: 410rpx;
		display: inline-block;
		content: '';
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		background: #ff3932;
	}

	.coupon_item::before {
		left: 0rpx;
		transform: translateX(-50%);
	}

	.coupon_item::after {
		right: 0rpx;
		transform: translateX(50%);
	}
</style>
